<!--
 * @Descripttion: 
 * @version: 
 * @Author: ada.wu
 * @Date: 2023-07-26 16:36:44
 * @LastEditors: ada.wu
 * @LastEditTime: 2023-12-13 23:43:20
-->
<template>
  <el-container class="app_container">
    <el-header>
      <div class="d-flex justify-content-between">
        <div class="hd fw-bold">
          <div class="logo hstack">
            <img src="@/assets/img/logo.png" alt="logo" />
            <a>重庆交通大学</a>
          </div>
        </div>
        <div class="menu-wrapper"></div>
        <div class="d-flex align-items-center">
          <img src="@/assets/img/logout.svg " alt="logo" @click="onLogout" />
        </div>
      </div>
    </el-header>
    <el-main>
      <div class="app_contemt">
        <div class="por_container">
          <div class="adSpace">
            <div class="adSpace-text">
              <font color="#0DB895">智慧教室</font>运维管理平台
            </div>
          </div>
          <el-row :gutter="80" class="text-df padding-lr-lg" align='middle'>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(data, index) in dataList" :key="index">
              <div class="bg t-c" @mouseenter="handleMouseover(index)" @mouseleave="handleMouseout(index)"
                @click="goUrl(data)">
                <div style="width:160px;height:160px;margin:0 auto">
                  <img :src="`${getImg(index)}?${Date.now()}`" class="icon1" v-cloak />
                </div>
                <div :class="{ 's-title': data?.show }">
                  <div class="d-title">{{ data?.title }}</div>
                  <div class="el-etitle mt-3">{{ data?.etitle }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script  setup>
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import useAuthStore from '@/stores/useAuthStore';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
const authStore = useAuthStore();

// ======================================================
//                      变量声明
// ======================================================
const router = useRouter();
// ======================================================
//                      处理事件
// ======================================================
// 点击退出登录按钮
const onLogout = () => {
  ElMessageBox.confirm('您确定要退出登录吗？', '操作确认', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(res => {
    authStore.logout();
    router.push('/login');
  })
}


const dataList = ref([]);
onMounted(async () => {
  lodaMeaus();

  dataList.value = [
    {
      name: "classroom",
      img: "./images/home/classroom.png",
      img1: "./images/home/classroom1.png",
      imgGrey: "./images/home/classroom-grey.png",
      greyShow: false,
      show: false,
      greyShow: false,
      title: "教室管理",
      etitle: "CLASSROOM MANAGEMENT",
    },
    {
      name: "monitor",
      img: "./images/home/teachMonitor.png",
      img1: "./images/home/teachMonitor1.png",
      imgGrey: "./images/home/teachMonitor-grey.png",
      show: false,
      greyShow: false,
      title: "教学监控",
      etitle: "CONTROLE MANAGEMENT",
    },
    {
      name: "teaching",
      img: "./images/home/teactLink.png",
      img1: "./images/home/teactLink1.png",
      imgGrey: "./images/home/teactLink-grey.png",
      show: false,
      greyShow: false,
      title: "教学联动",
      etitle: "TEACHING LIKNAGE",
    },
    {
      name: "operation",
      img: "./images/home/iTOperation.png",
      img1: "./images/home/iTOperation1.png",
      imgGrey: "./images/home/iTOperation-grey.png",
      show: false,
      greyShow: false,
      title: "运维管理",
      etitle: "IT OPERATION MANAGEMENT",
    },
    {
      name: "equipment",
      img: "./images/home/property.png",
      img1: "./images/home/property1.png",
      imgGrey: "./images/home/property-grey.png",
      show: false,
      greyShow: false,
      title: "资产管理",
      etitle: "ASSET MANAGEMENT",
    },
    {
      name: "report",
      img: "./images/home/data.png",
      img1: "./images/home/data1.png",
      imgGrey: "./images/home/data-grey.png",
      show: false,
      greyShow: false,
      title: "数据统计",
      etitle: "DATA STATISTICS",
    },
    {
      name: "user",
      img: "./images/home/user.png",
      img1: "./images/home/user1.png",
      imgGrey: "./images/home/user-grey.png",
      show: false,
      greyShow: false,
      title: "用户管理",
      etitle: "USER MANAGEMENT",
    },
    {
      name: "system",
      img: "./images/home/system.png",
      img1: "./images/home/system1.png",
      imgGrey: "./images/home/system-grey.png",
      show: false,
      greyShow: false,
      title: "系统设置",
      etitle: "SYSTEM SETTINGS",
    },
  ];

});
const getImg = (index) => {
  if (dataList.value[index].show) {
    return dataList.value[index].img1;
  } else if (dataList.value[index].greyShow) {
    return dataList.value[index].imgGrey;
  }
  else {
    return dataList.value[index].img;
  }
}
const handleMouseover = (index) => {
  if (dataList.value[index].greyShow) {
    dataList.value[index].greyShow = true
  } else {
    dataList.value[index].show = true;

  }

};
const handleMouseout = (index) => {
  dataList.value[index].show = false;
};
const goUrl = (data) => {
  if (!data.greyShow) {
    router.push({ path: '/', query: { home_url: data.name } })
  } else {
    ElMessage.error('暂无权限')
  }

};
const compareArrays = (array1, array2, key) => {
  const array1Map = new Map(array1.map(obj => [obj[key], true]));
  const result = array2.map(obj => !array1Map.has(obj[key]));
  result.map((item, index) => dataList.value[index].greyShow = item)
}
// 获取路由资源
const lodaMeaus = () => {
  EsAjax.post(ApiUrls.resourceUsermenu).then(res => {
    if (res.data.code === 200) {
      compareArrays(res.data.data, dataList.value, 'name')
    }
  })
}

</script>


<style lang="less" scoped>
.disabled-cursor {
  cursor: not-allowed;
}

.app_contemt {
  padding-top: 30px;
}

.adSpace {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 40px;
  text-align: center;

  .adSpace-text {
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    background: url("@/assets/img/home/tag.png") no-repeat;
    background-size: 100% 100%;
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    justify-content: center;
    width: 500px;
    height: 60px;
    line-height: 60px;
    padding: 8px 20px;
    color: #fff;
    margin: 0 auto;
    position: relative;
    font-size: 24px;
  }
}

.el-col {
  position: relative;
}

.bg {
  background: url("@/assets/img/home/bg.svg") no-repeat;
  background-size: 100% 100%;
  width: 280px;
  height: 300px;
  background-size: 280px 200px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background-position: center bottom;
  overflow: hidden;
  border-radius: 10px;
  box-sizing: border-box;
  padding-top: 40px;
  cursor: pointer;

  .icon1 {
    transition: all 0.2s ease-in-out;
    margin-top: -25px;
  }

  margin-bottom: 50px;
}

.s-title {
  margin-top: -8px;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg,
      transparent 3%,
      rgba(255, 255, 255, 0.1);
    );

  .el-etitle {
    color: #1c4d82;
  }
}

.d-title {
  color: #fff;
  font-size: 18px;
  transition: all 0.2s ease-in-out;
}

.el-etitle {
  padding-bottom: 55px;
  color: #2c4d82;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
}
</style>